<template>
  <div>
    <div class="header">
      <h1>热歌榜</h1>
      <p>日期:{{ newData }}</p>
    </div>
    <div class="hotsong_box">
      <ul>
        <!-- <li v-for="(song, idx) in hotSong" :key="idx">
          <div class="hotsong_num" :class="idx < 3 ? 'changeRed' : ''">
            {{ (idx + 1).toString().padStart(2, "0") }}
          </div>
          <div class="hotsong">
            <div class="left_box">
              <div class="left_d1">{{ song.name }}</div>
              <div class="left_d2">
                <img src="../../assets/sq.png" />{{ song.ar | singer }} -
                {{ song.al.name }}
              </div>
            </div>
            <div class="right_box" @click="sendId(song)">
              <img src="../../assets/go.png" />
            </div>
          </div>
        </li> -->
        <song
          v-for="(song, idx) in hotSong"
          :key="song.id"
          :song_data="{
            song_name: song.name,
            song_artists: song.ar,
            song_album: song.al.name,
            song_exclusive: true,
            id: song.id,
            idx: idx + 1,
          }"
          :id_list="id_lis"
          :idx="idx"
        ></song>
      </ul>
    </div>
  </div>
</template>

<script>
import { get_hotsong } from "../../api/rank";
import song from "../../components/song";
export default {
  data() {
    return {
      hotsongList: [],
    };
  },
  components: {
    song,
  },
  created() {
    get_hotsong().then((res) => {
      // console.log(res.data.playlist.tracks);
      this.hotsongList = res.data.playlist.tracks;
    });
  },
  computed: {
    newData() {
      let time = new Date();
      let month = time.getMonth();
      let day = time.getDate();
      return month + 1 + "月" + day + "日";
    },
    hotSong() {
      return this.hotsongList.slice(0, 20);
    },
    id_lis() {
      return this.hotSong.map((el) => el.id);
    },
  },
  filters: {
    songName(arr) {
      return arr
        .map((el) => {
          return el.name;
        })
        .join("/");
    },
  },
  methods: {
    //传递歌曲id
    sendId(song) {
      this.$store.state.songid = song.id;
      // console.log(this.$store.state.songid);
      this.$store.state.songimg = song.al.picUrl;
      this.$store.state.songname = song.name;
      this.$store.state.singer = song.ar;
      console.log(song);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #a65343;
  color: white;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  p {
    margin: 0;
    margin-bottom: 50px;
  }
}
.hotsong_box {
  ul {
    width: 100%;
    overflow: hidden;
  }
}
</style>
